<template>
  <div>
    <div id="productsPie" class="echart-pie" style="max-width: calc(100vw - 250px);height:1000px;padding-left: 30px"></div>`
  </div>

</template>

<script>
import * as echarts from 'echarts';
import request from "@/utils/request";
const option = {
  title: {
    text: '文创产品玫瑰图',
    textStyle:{
      fontSize:30,
    },
    itemGap:20,
    left:'left'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c} ({d}%)',
    textStyle:{
      fontSize:40,
      fontWeight:40,
      color:'#30cee3'
    },
  },
  legend: {
    orient:'vertical', //设置图例朝向
    // x:'left',
    // y:'center',
    left: 'left',
    top: 'center',
    textStyle:{
      fontSize:25,
      fontWeight:40,
      color:'#30cee3'
    },
    //图例
    data: []
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  series: [
    //选用面积模式展示,这样最小的区域也能比较明显,半径模式差距太大,数据很容易被忽视
    {
      name: '文创类别',
      type: 'pie',
      radius: [100, 400],
      center: ['60%', '65%'], //圆心位置
      roseType: 'radius', //radius:半径模式 area:面积模式
      itemStyle: {
        borderRadius: 15
      },
      label: {
        textStyle:{
          fontSize:20,
          fontWeight:30,
          color:'#30cee3'
        },
      },
      data: []
    }
  ]
};
export default {
  name: "productsPieChart",
  components:{},
  data(){
    return{
      productsList:[],
      lineBox:null,//初始化作用
      params: {
        pageNum: 1,
        pageSize: 1000,
        name: '',
        price:''
      },
    }
  },
  mounted() {
    this.lineBox = echarts.init(document.getElementById('productsPie'))
    this.initEchart()
  },
  methods:{
    initEchart(){
      request.get('/products/page',{
        params:this.params
      }).then(res => {
        if(res.code === '200') {
          const productList={}
          this.productsList = res.data.list
          this.total = res.data.total
          //来一个循环判断
          if(!this.lineBox){
            // 初始化echarts容器
            console.log("这里未初始化")
          }else {
            this.productsList.forEach((item) => {
              // console.log("item内容是",item)
              if(productList[item.categoryName]){
                productList[item.categoryName] ++
              }else{
                productList[item.categoryName]=1
              }

              const productNewList = []
              for(let i=0;i<Object.keys(productList).length;i++){
                const value = {
                  name:Object.keys(productList)[i],
                  value:Object.values(productList)[i]
                }
                productNewList.push(value)
              }
              option.legend.data.push(item.categoryName)
              option.series[0].data = productNewList
            })
          }
          this.lineBox.setOption(option);
        }
      })
    }
  }
}
</script>

<style scoped>

</style>